<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/css/app.css" rel="stylesheet"/>
</head>

<body>
    <div class="rows" style="width: 600px;margin:0 auto">
        <h3>用户登陆</h3>
        <form class="m-t-1" id="loginMain"  method="POST">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="username" class="form-control{{if .err.username}} is-invalid{{end}}"  value="{{.username}}" required  >
                {{if .err.username}}
          
                <div class="invalid-feedback">{{.err.username}}</div>
                {{end}}
          
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" name="password" class="form-control{{if .err.password}} is-invalid{{end}}"  id="pwd" value="{{.password}}"   >
                {{if .err.password}}
                <div  class="invalid-feedback">{{.err.password}}</div>
                {{end}}
               
            </div>
            <div class="form-group">
                <label for="code">验证码</label>
                <div class="row">
                    <div class="col-sm-3">
                         <input type="text" name="code" class="form-control{{if .err.code}} is-invalid{{end}}" id="code" value="" >
                        {{if .err.code}}
                        <div  class="invalid-feedback">{{.err.code}}</div>
                        {{end}}
                         <input type="hidden" name="code_id"  id="captchaId"/>
                    </div>
                    <div class="col-sm-5"> <img src="" id="codeImg" style="cursor: pointer;" onclick="getNewCode()" /></div>
           
                </div>
               
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input">
                    记住密码
                </label>
            </div>
            <div>
                <button class="btn btn-primary">登陆</button>
            </div>
        </form>
    </div>

</body>

</html>

<script src="/static/js/jquery.min.js"></script> 



<script>

    $(function(){
        getNewCode();
        $('#loginBtn').on('click',function(){
            let res = $("#form input").serializeArray();
            console.log(res);
        });
    });
    function getNewCode() {
        $.getJSON("/captcha/get", function (d) {
            $('#codeImg').attr({"src": d.data});
            $('#captchaId').attr('value',d.captchaId);
        })
    }

    function verifyCode(){
        $.post("/captcha/verify", {id:$('#codeImg').attr('data-id'),code:$('#code').val()},function (d) {
            console.log(d)
        })
    }
</script>